<template>
  <div class="selectInfo">
    <div class="select d-flex pointer" @click="changeShow()">
      <div class="name">{{treeData.select}}</div>
      <div class="arrowD"></div>
    </div>
    <div class="treeContent" v-if="showChild">
      <div v-for="(item,index) in treeData.list" :key="index" class="mainNode">
        <div class="d-flex ai-center">
          <img class="mainCheck pointer" v-if="!type" :src="!item.check?uncheck:checked" alt="" @click="mainCheck(index)">
          <img class="mainCheck pointer" v-else :src="!item.check?uncheck:checked2" alt="" @click="mainCheck(index)">
          <div :class="['name']">{{item.name}}</div>
        </div>
        <!-- <div v-for="(item1,index1) in item.children" :key="index1" class="subNode d-flex">
          <img class="nodeImg" :src="item1.actived?checkedNode:uncheckNode" alt="">
          <div :class="['subname',item1.actived?'nameActived':'']">{{item1.name}}</div>
          <div class="subCheck d-flex ai-center">
            <img class="pointer" :src="item1.actived?checked:uncheck" alt="" @click="subCheck(index,index1)">
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent,ref,reactive,watch,onMounted,onUnmounted,} from 'vue'
import clone from "@/utils/common"
// 声明类型
export default defineComponent({
  props: {
    data: {
      type: Object,
      require: true,
    },
    type:{
      type: Boolean,
    }
  },
  components: {},
  setup(props,{emit}) {
    //变量
    const uncheck = require('@/assets/img/uncheck.png')
    const checked = require('@/assets/img/checked.png')
    const checked2 = require('@/assets/img/check2.png')
    const checkedNode = require('@/assets/img/checkedNode.png')
    const uncheckNode = require('@/assets/img/uncheckNode.png')
    let type=props.type
    let treeData = reactive(clone(props.data))
    let showChild=ref(false)
    // 监听
    watch(props.data, (val) => {
      // treeData.select = clone(val.select)
      // treeData.list = clone(val.list)
    })
    //生命周期
    onMounted(() => {
      //
      
    })

    onUnmounted(() => {
      //
    })
    function changeShow(){
      console.log('dsaffdsf');
      
      showChild.value=!showChild.value
    }

    //methods
    //父节点点击 全选/全不选
    const mainCheck = (index) => {
      treeData.list.forEach(item=>{
        item.check=false
      })
      treeData.list[index].check=!treeData.list[index].check
      if(!type){
        emit('changeShowDeviceSet',treeData.list[index]['key'])
      }else{
        emit('changeShowSs',treeData.list[index]['name'],index)
      }
     
      // let isAllChecked = treeData.list[index].children.every(item=>item.actived==true)
      // treeData.list[index].children.forEach(item=>{
      //   item.actived = isAllChecked?false:true
      // })
      showChild.value=false
    }

    //子节点点击 选中/不选中当前节点
    const subCheck = (index,index1) => {
      treeData.list[index].children[index1].actived = !treeData.list[index].children[index1].actived
    }

    // const hasChecked = (index) => {
    //   return treeData.list[index].children.some(item=>item.actived==true)
    // }

    // return
    return {
      uncheck,
      checked,
      checkedNode,
      uncheckNode,
      treeData,
      checked2,
      type,
      mainCheck,
      subCheck,
      showChild,
      changeShow
      //hasChecked
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';
@import './tree.scss';
.treeContent{
  background: rgba(255, 255, 255, 0.08);
}
</style>
